{#订单显示界面 Order数据表#}
{% extends 'laout.html' %}
{% load color %}
{% load static %}

{% block css %}
    <style>
        {#massga 错误提示样式       #}
        .top-message-error {
            position: fixed;
            left: 0;
            right: 0;
            width: 400px;
            margin-left: auto;
            margin-right: auto;
            top: 48px;
        }
    </style>
{% endblock %}

{% block content %}

{#    有错误才执行#}
    {% if messages %}
        <div class="top-message-error">
            {# 在html界面读取massga方法#}
            <ul>
            {% for obj in messages %}
                <div class="alert alert-{{  obj.tags }}">
                    {{ obj }}
                </div>
            {% endfor %}
            </ul>
        </div>
    {% endif %}




    {#跳转添加订单界面    #}
    <div style="margin-bottom: 5px">
        <a href="{% url 'my_order_add' %}" class="btn btn-success">
            <span class="glyphicon glyphicon-plus-sign"></span> 创建订单
        </a>
    </div>

    <table class="table table-bordered">
        <thead>
        <tr>
            <th>订单号</th>
            <th>视频地址</th>
            <th>数量</th>
            <th>价格（成交/原价）</th>
            <th>原播放数量</th>
            <th>创建时间</th>
            <th>订单状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            {% for row in pager.queryset %}
            <tr>
                <td>{{ row.oid }}</td>
                <td>{{ row.url }}</td>
                <td>{{ row.count }}</td>
                <td>{{ row.real_price }}（{{ row.price }}）</td>
                <td>{{ row.old_view_count }}</td>
                <td>{{ row.create_datetime|date:"Y-m-d H:i:s" }}</td>
                {#  订单状态status  显示中文语法get——XXX —display          #}
                <td><span class="btn btn-xs btn-{{ row.status|colors }}">{{ row.get_status_display }}</span></td>
                <td>
                    {# 撤单功能按钮 在待执行1的时候才能撤单            #}
                    {% if row.status == 1 %}
                        <a href="{% url 'my_order_cancel' pk=row.id %}" class="btn btn-danger btn-xs">撤单</a>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}

        </tbody>
    </table>
    {# 分页   #}
    <ul class="pagination">
        {{ pager.html }}
    </ul>

{% endblock %}


{% block js %}
    <script>
        // 使用定时器,实现massage错误提示维持5秒 只执行一次
        setTimeout(function () {
            $(".top-message-error").addClass('hide');
        }, 5000);
    </script>
{% endblock %}